<template>
  <div class="home">
   <p>count1: {{count1}}</p>
   <p>count2: {{count2}}</p>
   <button @click="add">增加</button>
  </div>
</template>
 
<script>
import { ref, watch, computed } from 'vue'
export default {
  setup () {
    // 声明 count 变量，初始值为 0
    const count1 = ref(0)
    const count2 = ref(1) 
    // 定义 add 方法
    const add = () => {
      count1.value++
      count2.value=count2.value+3
    }
    // 监听多个属性的写法
		watch(
		  [()=>count1.value,()=>count2.value],
		  ([newCount1, newCount2], [oldCount1, oldCount2]) => {
         console.log(newCount1)
         console.log(newCount2)
         console.log(oldCount1)
         console.log(oldCount2)
		  }
		) 
		//  监听一个属性（可以连写2个watch来达到监听2分属性的效果）
    //  第一个参数是监听的值，count.value 表示当 count.value 发生变化就会触发监听器的回调函数，即第二个参数，第二个参数可以执行监听时候的回调
		//  watch(
		//    () => count.value,
		//    (val, oldVal) => { console.log(`new count: ${val}，old count: ${oldVal}`) }
		//  )
		//
		// 
		//  watch(
		//    () => a.value,
		//    (val, oldVal) => { console.log(`new a: ${val}，old a: ${oldVal}`) }
		//  ) 
    return {
      count1,
      count2,
      add
    }
  }
}
</script>